<html>

<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <meta name="description" content="Login - Register Template">
    <meta name="author" content="Lorenzo Angelino aka MrLolok">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/stylesheets/main.css">
    <style>
        body {
            background-color: #303641;
        }
    </style>
</head>

<body>
    <div id="container-register">
        <div id="title">
            <i class="iconfont icon-suo"></i> 注册
        </div>

        <form action="" method="POST" onsubmit="return Acess()">
            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-ren-copy"></i>
                </div>
                <input name="username" placeholder="用户名" type="text" required class="validate" autocomplete="off" pattern="^[^ ]{3,10}$">
                <span id="username"></span>
            </div>

            <div class="clearfix"></div>

            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-mima"></i>
                </div>
                <input name="password" placeholder="密码" type="password" required class="validate" autocomplete="off" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" >
                <span id="password"></span>
            </div>

            <div class="clearfix"></div>

            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-mima"></i>
                </div>
                <input name="confirmPassword" placeholder="确认密码" type="password" required class="validate" autocomplete="off">
                <span id="confirmPassword"></span>
            </div>

            <div class="clearfix"></div>
            
            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-gerentouxiang_o"></i>
                </div>
                <input name="name" placeholder="输入昵称" type="text" required class="validate" autocomplete="off" pattern="^[\u4E00-\u9FA5]+$">
                <span id="name"></span>
            </div>

            <div class="clearfix"></div>
            
            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-dianhua"></i>
                </div>
                <input name="phone" placeholder="您的电话" type="text" required class="validate" autocomplete="off" pattern="^1[0-9]{10}$">
                <span id="phone"></span>
            </div>

            <div class="clearfix"></div>

            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-youxiang-copy"></i>
                </div>
                <input name="emile" placeholder="您的邮箱" type="email" required class="validate" autocomplete="off" pattern="^[a-zA-Z0-9_]{1,}[@][a-z0-9]{2,3}[.][a-z]{2,3}$">
                <span id="emile"></span>
            </div>

            <div class="clearfix"></div>

            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-aihao"></i>
                </div>
                <input name="habby" placeholder="您的爱好" type="text"  class="validate" autocomplete="off">
                <span id="habby"></span>
            </div>

            <div class="clearfix"></div>

            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-banji"></i>
                </div>
                <select class="class" name="class">
                    <option>您的班级</option>
                    <option>一班</option>
                    <option>二班</option>
                    <option>三班</option>
                </select>
                <span id="class"></span>
            </div>

            <div class="clearfix"></div>

            <div class="input">
                <div class="input-addon">
                    <i class="iconfont icon-banji"></i>
                </div>
                <select class="sex" name="sex">
                    <option>您的性别</option>
                    <option>男</option>
                    <option>女</option>
                    <option>第三方</option>
                </select>
                <span id="sex"></span>
            </div>
            <div class="remember-me">
                <input type="checkbox">
                <span style="color: #DDD">我同意服务条款    </span>
            </div>

            <input type="submit" id="register" value="注册" />
        </form>

        <div class="privacy">
            <a href="#">隐私政策</a>
        </div>

        <div class="register">
            ++您已经注册或有了账号++
            <a href="http://localhost:3000/login"><button id="register-link">现在登录</button></a>
        </div>
    </div>
</body>
<script src="/javascripts/register.js"></script>
</html>
